<template>
  <div>
    <h1>{{id?'编辑':'新建'}}英雄</h1>
    <el-form @submit.native.prevent="saveArticle" ref="form" :model="model" label-width="120px">
      
      <el-tabs type="border-card" value="base">
        <el-tab-pane label="基础信息" name="base">
          <el-form-item label="名称"><el-input v-model="model.name"></el-input></el-form-item>
          <el-form-item label="称号"><el-input v-model="model.title"></el-input></el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :headers='getHeader()'
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="model.avatar" :src="model.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="背景图">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :headers='getHeader()'
              :on-success="res=>$set(model,'banner',res.url)"
              :before-upload="beforeAvatarUpload">
              <img v-if="model.banner" :src="model.banner" class="banner">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="model.categories" multiple >
              <el-option v-for="(item,index) in herocategory" :key="index" :label="item.title" :value="item._id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度"><el-rate style="margin-top:.6rem" :max="9" show-score v-model="model.scores.difficult"></el-rate></el-form-item>
          <el-form-item label="技能"><el-rate style="margin-top:.6rem" :max="9" show-score v-model="model.scores.skill"></el-rate></el-form-item>
          <el-form-item label="攻击"><el-rate style="margin-top:.6rem" :max="9" show-score v-model="model.scores.attack"></el-rate></el-form-item>
          <el-form-item label="生存"><el-rate style="margin-top:.6rem" :max="9" show-score v-model="model.scores.live"></el-rate></el-form-item>
          <el-form-item label="顺风出装">
            <el-select v-model="model.items1" multiple filterable>
              <el-option v-for="(item,index) of items" :key="index" :label="item.name" :value="item._id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="逆风出装">
            <el-select v-model="model.items2" multiple filterable>
              <el-option v-for="(item,index) of items" :key="index" :label="item.name" :value="item._id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用技巧"><el-input type="textarea" v-model="model.useTip"></el-input></el-form-item>
          <el-form-item label="对抗技巧"><el-input type="textarea" v-model="model.battleTip"></el-input></el-form-item>
          <el-form-item label="团战思路"><el-input type="textarea" v-model="model.teamTip"></el-input></el-form-item>
          <!-- <el-form-item label="最佳搭档">
            <el-select v-model="model.partners[0].hero" >
              <el-option v-for="(item,index) of heroes" :key="index" :label="item.name" :value="item._id"></el-option>
            </el-select>
            <el-input type="textarea" v-model="model.partners[0].desc"></el-input>
          </el-form-item> -->
          
        </el-tab-pane>
        <el-tab-pane label="最佳搭档">
            <el-button size="small" @click="model.partners.push({})"><i class="el-icon-plus"></i>添加搭档</el-button>
            <el-row type="flex" style="flex-wrap:wrap">
              <el-col :md="12" v-for="(item,i) in model.partners" :key="i">
                <el-select v-model="item.hero" filterable>
                  <el-option v-for="(li,j) of heroes" :key="j" :label="li.name" :value="li._id"></el-option>
                </el-select>
                <el-input type="textarea" v-model="item.desc"></el-input>
                <el-button type="danger" size="small" @click="model.partners.splice(i,1)">删除</el-button>

              </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="技能" name="skills">
          <el-button size="small" @click="model.skills.push({})"><i class="el-icon-plus"></i>添加技能</el-button>
          <el-row type="flex" style="flex-wrap:wrap">
            <el-col :md="12" v-for="(item,index) in model.skills" :key="index">
              <el-form-item label="名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="冷却">
                <el-input v-model="item.delay"></el-input>
              </el-form-item>
              <el-form-item label="消耗">
                <el-input v-model="item.cost"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :headers='getHeader()'
                  :on-success="res=>$set(item,'icon',res.url)"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="item.icon" :src="item.icon" class="icon">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="描述">
                <el-input type="textarea" v-model="item.desc"></el-input>
              </el-form-item>
              <el-form-item label="技巧">
                <el-input type="textarea" v-model="item.tip"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" size="small" @click="model.skills.splice(index,1)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="皮肤">
          <el-button size="small" @click="model.skins.push({})"><i class="el-icon-plus"></i>添加皮肤</el-button>
          <el-row  type="flex" style="flex-wrap:wrap">
            <el-col v-for="(item,i) in model.skins" :key="i">
              <el-form-item label="皮肤名字"><el-input type='text' v-model="item.name"></el-input></el-form-item>
              <el-form-item label="皮肤">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :headers='getHeader()'
                  :on-success="res=>$set(item,'url',res.url)"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="item.url" :src="item.url" class="banner">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" size="small" @click="model.skins.splice(i,1)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="视频">
          <el-button size="small" @click="model.videos.push({})"><i class="el-icon-plus"></i>添加皮肤</el-button>
          <el-row  type="flex" style="flex-wrap:wrap">
            <el-col v-for="(item,i) in model.videos" :key="i">
              <el-form-item label="视频标题"><el-input type='text' v-model="item.title"></el-input></el-form-item>
              <el-form-item label="播放数量"><el-input type='text' v-model="item.playNum"></el-input></el-form-item>
              <el-form-item label="视频图片">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :headers='getHeader()'
                  :on-success="res=>$set(item,'img',res.url)"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="item.img" :src="item.img" class="banner">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" size="small" @click="model.skins.splice(i,1)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button style="margin-top:1rem" type="primary" native-type="submit" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  export default {
    props:{
      id:{}
    },
    data() {
      return {
        model: {
          name:'',
          avatar:'',
          partners:[{}],
          skills:[{}],
          skins:[{}],
          videos:[{}],
          scores:{},
          banner:''
        },
        categories:[],
        pagedata:[],
        herocategory:[],
        items:[],
        heroes:[]
      }
    },
    created() {
      this.id && this.feach();
      this.feachCategories();
      this.feachItems();
      this.feachHero();
    },
    methods: {
      async feach(){
        const res = await this.$http.get(`rest/heroes/${this.id}`)
        //this.model=res.data
        this.model=Object.assign({},this.model,res.data)//合并数组
      },
      async feachCategories(){//获取分类
        const res = await this.$http.get('rest/categories')
        this.categories=res.data
        this.categories.forEach(ele => {
          if (!ele.parent) {
            this.pagedata.push(ele)
          }
        });
        this.pagedata.forEach(e => {
          e.children=[]
          for (const ele of this.categories) {
            if (ele.parent) {
              if (ele.parent.title===e.title) {
                e.children.push(ele)
              }
            }
          }
        });
        this.herocategory=this.pagedata[0].children
      },
      async feachItems(){//获取装备
        const res = await this.$http.get('rest/items')
        this.items=res.data
      },
      async feachHero(){//获取英雄
        const res = await this.$http.get('rest/heroes')
        this.heroes=res.data
      },
      onSubmit() {
        console.log('start!');
      },
      async saveArticle(){
        let res
        if (this.id) {//编辑
          res = await this.$http.put(`rest/heroes/${this.id}`,this.model)
        }else{//新建
          res = await this.$http.post('rest/heroes',this.model)
        } 
        this.$router.push('/heroes/list')
        console.log(res.data);
        this.$message({
            message: '保存成功',
            type: 'success'
        });
      },
      handleAvatarSuccess(res) {
        //console.log('图片上传服务器');
        //this.$set(this.model,'avatar',res.url)//显示赋值
        this.model.avatar=res.url
      },
      /* upSkin(res){
        console.log(i);
        
        //this.model.skins=res.url
      }, */
      beforeAvatarUpload(file) {
        //const isJPG = file.type === 'image/jpeg';
        const isJPG = true
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>
<style lang="css">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 5rem;
    height: 5rem;
    line-height: 5rem !important;
    text-align: center;
  }
  .avatar {
    width: 5rem;
    height: 5rem;
    display: block;
  }
  .banner{
    width: 10rem;
    height: auto;
  }
</style>